<template>
  <div>
    <div style="background-color: #fff; height: 500px">
      <p style="font-size: 20px; margin: 10px 0 0 10px; padding: 20px">
        专题基础信息
      </p>
      <div style="margin-left: 70px">
        <p style="margin-top: 10px">
          专题名称：<el-input
            v-model="name"
            style="width: 240px"
            placeholder="请输入内容"
          />
        </p>
        <br />
        <p style="margin-top: 10px">
          专题描述：<el-input
            v-model="content"
            style="width: 400px"
            placeholder="请输入内容"
          />
        </p>
        <br />
        <p style="margin-top: 10px">
          相关单品：<el-input
            v-model="num"
            style="width: 240px"
            placeholder="请输入单品"
          />
        </p>
        <br />
        <p style="margin-top: 10px">
          发布时间：<el-date-picker
            v-model="date"
            type="date"
            placeholder="请选择时间"
            style="width: 400px"
          />
        </p>
        <br />
        <p style="margin-top: 10px">
          专题状态：<el-radio v-model="qijin" name="yong" :value="true"
            >正常</el-radio
          >
          <el-radio v-model="qijin" name="yong" :value="false">禁用</el-radio>
        </p>
        <br />
        <div style="margin-top: 10px; margin-left: 50px">
          <el-button @click="add">新建</el-button>
          <el-button @click="reset">取消</el-button>
        </div>
      </div>
    </div>
    <div style="background-color: #fff; height: 300px; margin-top: 20px">
      <p style="font-size: 20px; margin: 10px 0 0 10px; padding: 20px">
        展示图片
      </p>
      <div style="margin-left: 70px">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <el-icon><Plus /></el-icon>

          <template #file="{ file }">
            <div>
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <el-icon><Download /></el-icon>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </div>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
      <div style="margin-top: 30px; margin-left: 70px">
        <el-button @click="add">新建</el-button>
        <el-button>修改</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import type { UploadFile } from "element-plus";
import axios from "axios";
import { useRoute,useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const handleRemove = (file: UploadFile) => {
  console.log(file);
};

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};

const handleDownload = (file: UploadFile) => {
  console.log(file);
};
const name = ref("");
const content = ref("");
const qijin = ref("");
const date = ref("");
const num = ref("");
const add = async () => {
  let data = {
    name: name.value,
    content: content.value,
    flag: qijin.value,
    time: date.value,
    num: num.value,
  };
  await axios.post("http://localhost:3000/zjm/addsman", data).then((res) => {
    console.log(res);
    router.push('/index/specialmanagement')
  });
  console.log(data);
};
const reset = () => {
  name.value = "";
  content.value = "";
  qijin.value = "";
  date.value = "";
  num.value = "";
};
</script>

<style scoped>
</style>